<template>
    <div class="image-container">
        <div class="image-wrapper" v-for="computer in computerLists" :key="computer.id" @click="wakeup(computer)">
            <el-avatar shape="square" :size="100" fit="cover" :src="computer.icon" />
            <div class="image-text">{{ computer.name }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import axios from 'axios';

interface WolInfo {
    id: number,
    name: string,
    icon: string
}

let computerLists = reactive<WolInfo[]>([])

const wakeup = async (info: WolInfo) => {
    ElMessageBox.prompt('请输入密码', '验证', {
        confirmButtonText: '唤醒',
        cancelButtonText: '取消',
        // inputPattern:
        //     /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '无效密码',
    })
        .then((inputRes) => {
            axios.post<string>('/service/wake', {
                computer_id: info.id,
                password: inputRes.value
            })
                .then(function (response) {
                    ElNotification({
                        title: 'Success',
                        message: `${info.name}唤醒成功`,
                        type: 'success',
                    })
                })
                .catch((error) => {
                    
                    ElNotification({
                        title: 'Error',
                        message: error.status == 401 ? `${info.name}唤醒失败, 密码错误` : `${info.name}唤醒失败, 未知错误`,
                        type: 'error',
                    })
                });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '输入取消',
            })
        })
}

const getComputerList = async () => {
    let res = await axios.get<WolInfo[]>("/service/computer_lists")
    computerLists.length = 0;
    res.data.forEach((element:WolInfo) => {
        element.icon = `/service/computer/icon?id=${element.id}`
        computerLists.push(element)
    });
}
getComputerList()
</script>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    background-color: #f4f4f4;
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    /* 允许换行 */
    justify-content: center;
    /* 居中对齐图片 */
    gap: 10px;
    /* 图片间距 */
}

.image-wrapper {
    position: relative;
    width: 100px;
    /* 设置图片宽度 */
    height: 100px;
    /* 设置图片高度 */
    cursor: pointer;
    /* 鼠标悬停时变为点击手势 */
    perspective: 1000px;
    /* 定义3D效果的视距 */
    transition: transform 0.5s ease;
    /* 为整个图片容器添加过渡效果 */
}

.image-content {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
    /* 添加过渡效果 */
    transform-style: preserve-3d;
    /* 保留3D效果 */
}

.image-wrapper:hover .image-content {
    transform: rotateY(30deg) rotateX(30deg) scale(1.1);
    /* 增强3D旋转与缩放效果 */
}

.image-wrapper:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    /* 添加阴影效果 */
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 5px;
    /* 为图片添加圆角效果 */
}

.image-text {
    position: absolute;
    bottom: 5px;
    /* 调整文字位置 */
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 14px;
    /* 调整文字大小 */
    background-color: rgba(0, 0, 0, 0.6);
    /* 半透明背景 */
    padding: 5px 10px;
    /* 调整文字内边距 */
    border-radius: 5px;
    /* 调整文字边角 */
    opacity: 0;
    /* 初始状态为隐藏 */
    transition: opacity 0.3s ease;
    /* 文字淡入淡出效果 */
}

.image-wrapper:hover .image-text {
    opacity: 1;
    /* 悬停时显示文字 */
}
</style>
